<template>
	<div class="middle">
		<div style="margin-bottom: 18px">
			搜索推荐 :
			<span v-for="item in RecommendList" :key="item.id">
				<router-link class="s" :to="`/profile/editProfile/?id=` + item.id" style="padding: 2px">{{
					item.academyName
				}}</router-link>
			</span>
			<el-button style="margin-left: 5px" type="info" size="mini" @click="recommentSearch" icon="el-icon-refresh"
				>换一批</el-button
			>
		</div>

		<div style="display: inline-block; vertical-align: top">
			<el-select v-model="value" placeholder="请选择" style="margin-right: 20px; margin-left: 40px">
				<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
			</el-select>
		</div>

		<!-- 根据书院名称查询 -->
		<div class="search" style="margin-bottom: 20px; display: inline-block; vertical-align: top" v-if="value">
			<el-input style="width: 400px" placeholder="请输入书院名称" v-model.trim="title"></el-input>
			<el-button style="margin-left: 5px" icon="el-icon-search" type="primary" @click="load()">搜索</el-button>
			<div class="search-content">
				<a
					class="content"
					v-for="item in search"
					:key="item.id"
					@click="load(item.academyName)"
					v-html="highlightHTML(item.academyName, title)"
				></a>
			</div>
		</div>
		<div class="search" style="display: inline-block; margin-left: 10px" v-if="!value">
			<div>
				<!-- 根据地区查询 -->
				<el-cascader
					style="margin-left: 10px,margin-right: 20px;width:390px"
					v-model="option.children"
					:options="option"
					@change="handleChange"
				></el-cascader>

				<el-button style="margin-left: 5px" @click="loadAcademiesList" type="primary" icon="el-icon-search"
					>搜索</el-button
				>
			</div>
		</div>
		<div v-for="item in AList" :key="item.id">
			<router-link class="a" :to="`/profile/editProfile/?id=` + item.id">{{ item.academyName }}</router-link>
		</div>
	</div>
</template>

<script>
// @ is an alias to /src
import AddItemVue from '@/views/ProfileView/AddItem.vue'
import { reqRecommend } from '@/api'
import { reqAreaList } from '@/api'

import requests from '@/api/ajax'
const delay = (function () {
	let timer = 0
	return function (callback, ms) {
		clearTimeout(timer)
		timer = setTimeout(callback, ms)
	}
})()

export default {
	name: 'HomeView',
	data() {
		return {
			params: {
				page: 1,
				pageSize: 10
			},
			options2: [
				{
					value: true,
					label: '根据书院的名称搜索'
				},
				{
					value: false,
					label: '根据书院所在地搜索'
				}
			],
			value: true,
			total: 1,
			area: '',
			province: '',

			title: '', // 输入的书院信息
			search: [],
			academiesList: [],
			AList: [],
			option: [],
			RecommendList: []
		}
	},
	components: { AddItemVue },
	watch: {
		//watch title change
		title() {
			delay(() => {
				this.fetchData()
			}, 600)
		}
	},
	methods: {
		//在methods中定义函数
		//通过replace函数全局替换搜索键值
		//参数html为需高亮显示的内容，如搜索标题、搜索内容等
		highlightHTML: function (html, searh_key) {
			if (!searh_key) return html
			html = String(html)
			searh_key = String(searh_key)
			html = html.replace(new RegExp(searh_key, 'g'), `<span style="color:tomato;font-weight:bold">${searh_key}</span>`)
			return html
		},

		async recommentSearch() {
			let result = await reqRecommend()
			this.RecommendList = result.data
		},

		handleChange(value) {
			this.area = value[0]
			this.province = value[1]
		},
		async loadArea() {
			let result = await reqAreaList()

			if (result.code === 1) {
				let res = result.data
				let data = []
				for (let i = 0; i < res.length; i++) {
					let obj = {
						label: '',
						value: '',
						children: []
					}
					obj.label = res[i].area
					obj.value = res[i].area
					for (let j = 0; j < res[i].options.length; j++) {
						let objj = {
							label: '',
							value: ''
						}
						objj.label = res[i].options[j].province
						objj.value = res[i].options[j].province
						obj.children.push(objj)
					}
					data.push(obj)
				}
				this.option = data
			}
		},
		// AcademiesLis
		loadAcademiesList() {
			if (this.province) {
				this.$router.push('/search?province=' + this.province)
			} else {
				this.$message.warning('搜索内容不能为空哦！')
				return
			}
		},

		// name——根据title提示的书院名称
		load(name) {
			if (name == undefined && this.title == '') {
				this.$message.warning('搜索内容不能为空哦！')
				return
			} else if (name) {
				this.$router.push('/search?name=' + name)
			} else this.$router.push('/search?name=' + this.title)
		},
		searchName() {},
		async fetchData(val) {
			if (this.title !== '') {
				const res = await requests({
					url: '/academies/search',
					method: 'GET',
					params: {
						name: this.title,
						page: 1,
						pageSize: 5
					}
				})
				this.search = res.data.records
			}
		}
	},
	async created() {
		let result = await reqRecommend()

		this.RecommendList = result.data
		this.loadArea()
	}
}
</script>
<style scoped>
.middle {
	padding-left: 230px;
	margin: 60px auto 0;
	width: 1180px;
}
.search {
	margin: 0 auto;
	width: 540px;
}
span {
	display: inline-block;
	margin: 10px;
}
.search-content {
	width: 400px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
	margin-top: 9px;
}
.content {
	display: block;
	padding: 3px;
	cursor: pointer;
}
.content:hover {
	background-color: rgba(204, 204, 204, 0.653);
}
.a {
	display: block;
	margin-top: 5px;
	margin-left: 100px;
	font-size: 16px;
}
.s,
.a {
	font-size: 16px;
	color: #6c6b6b;
	text-decoration: none;
}

.s:visited,
.a :visited {
	color: #6c6b6b;
}
/* .a:link {
  
  
}
.s:link {
  color: #c0c0c0;
  text-decoration: none;
} */
/* //未访问：蓝色、无下划线  */

.a:hover {
	color: skyblue;
}
.s:hover {
	background-color: rgba(204, 204, 204, 0.653);
}

/* //鼠标移近：红色、下划线  */
</style>
